import { PlusOutlined ,LoadingOutlined, CodeSandboxCircleFilled} from '@ant-design/icons';
import { Upload, message,Form, Input,Button } from 'antd';
import { useState,useEffect} from 'react';
import myAxios from "../../utils/myAixos"
import styles from "./setAdmin.module.css"


const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};

export default function SetAdmin() {
  const [form] = Form.useForm()
  const { setFieldsValue } = form;
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();

  // let [adminData, setAdminData] = useState({});
  //获取管理员信息
  useEffect(()=>{
      //  console.log(localStorage.getItem("user"))
        //获取管理员的信息，通过管理员是否登录的状态来判断获取
        myAxios({
            url:"/getAdminData",
            method:"post",
        }).then(res=>{
          if(res.data.status===200){
              // console.log(res.data.data)
              // setAdminData()
              // console.log(adminData)
    //  res.data.data[0]
  
         setFieldsValue(
          res.data.data[0]
         )

          }else{
             //跳转到404页面 
           
             
          }
        })
        
  },[])
  //表单提交成功
  const onFinish = (values) => {
    // console.log('Success:', values);
     let myFormData=new FormData()
     myFormData.append("myFile",values.myfile.file.originFileObj)
     myFormData.append("a_name",values.a_name)
     myFormData.append("a_email",values.a_email)
     myFormData.append("a_password",values.a_password)
     console.log(values)
        myAxios({
             url:"/setAdmin",
             method:"post",
             data:myFormData
                 
             
        }).then(res=>{
              if(res.status===200){
                window.location.reload();
                  
              }
              
        })
      



  };

//与头像相关的数据

const handleChange = (info) => {
    // if (info.file.status === 'uploading') {
    //     setLoading(true);
    //     return;
    // }
    // if (info.file.status === 'done') {
    //     // Get this url from response in real world.
    //     getBase64(info.file.originFileObj, (url) => {
    //         setLoading(false);
    //         setImageUrl(url);
    //     });
    // }
    // console.log('%c ======>>>>>>>>', 'color:orange;', 'info', info)
    //判断他的类型和大小
    const isJpgOrPng = info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg';
    if (!isJpgOrPng) {
        return message.error('只能上传 jpeg/jpg/png 图片');
    }
    const isLt2M = info.file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        return message.error('最大只能上传2M的图片');
    }
    //将文件对象转成base64的地址，img才能显示出来
    getBase64(info.file.originFileObj, (url) => {
        setImageUrl(url);
    });

};
const uploadButton = (
    <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div
            style={{
                marginTop: 8,
            }}
        >
            Upload
        </div>
    </div>
);
const customRequest = () => {
    console.log('customRequest 执行了')
}

  return (
    <div>
         <div className={styles["fromBox"]}>
         <Form
         form={form}
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    onFinish={onFinish}
    autoComplete="off"
  >
     <Form.Item 
                       className={styles["one"]}
                        name="myfile"
                        rules={[{ required: true, message: '头像必选' }]}
                    >
                        <Upload
                            name="avatar"
                            listType="picture-circle"
                            className="avatar-uploader"
                            showUploadList={false}
                            fileList={[]}
                            // action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            onChange={handleChange}
                            customRequest={customRequest}
                        >
                            {imageUrl ? (
                                <img
                                    src={imageUrl}
                                    alt="avatar"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                uploadButton
                            )}
                        </Upload>
                    </Form.Item>
      
    <Form.Item
      className={styles["two"]}
      label="用户名"
      name="a_name"
      rules={[
        {
          required: true,
          message: '请输入你的用户名!',
        },
      ]}
    >
      <Input />
    </Form.Item>
    <Form.Item
     className={styles["two"]}
      label="Email"
      name="a_email"
      rules={[
        {
          required: true,
          message: '请输入你的邮箱!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
     className={styles["two"]}
      label="密码"
      name="a_password"
      rules={[
        {
          required: true,
          message: '请输入你要更改的密码!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
     className={styles["btn"]}
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
      保存
      </Button>
    </Form.Item>
  </Form>
         
         </div>

    </div>
  )
}
